<template>
  <div style="width: 100%; height: 100%; position: relative">
    <div :id="idname" style="width: 100%; height: 100%" v-if="!isShow"></div>
    <div class="no_data" v-show="isShow">
      <img ref="img" src="@/assets/images/no_data.png" alt="" />
      <p>暂无数据</p>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import { EleResize } from "@/utils/esresize.js";
export default {
  props: {
    idname: {
      type: String,
      required: true,
    },
    datalist: {
      type: Object,
      default: {
        legend_data: ["配送金额", "成本金额", "利润金额"],
        x_data: [],
        series: [
          {
            name: "配送金额",
            data: [],
          },
          {
            name: "成本金额",
            data: [],
          },
          {
            name: "利润金额",
            data: [],
          },
        ],
      },
    },
  },
  data() {
    return {
      isShow: false,
    };
  },
  watch: {
    datalist: {
      handler(val, oldVal) {
        let arr1 = [];
        val.series.map((item) => {
          arr1.push(item.data.filter((a) => a != 0.0));
        });
        let isShow = false;
        arr1.forEach((item) => {
          if (item.length) {
            isShow = true;
          }
        });
        if (isShow) {
          this.$nextTick(() => {
            this.chartColumn(1);
          });
        } else {
          this.$nextTick(() => {
            this.chartColumn(2);
          });
        }
      },
      deep: true,
    },
  },
  methods: {
    // 只适用图表方法
    drawLine(dom, option) {
      if (document.getElementById(dom)) {
        let myChart = echarts.init(document.getElementById(dom));
        let resizeDiv = document.getElementById(dom);
        myChart.clear();
        myChart.setOption(option);
        let listener = function () {
          myChart.resize();
        };
        EleResize.on(resizeDiv, listener);
      }
    },
    chartColumn(type) {
      // 折线图
      let dom = this.idname;
      var posList = [
        "left",
        "right",
        "top",
        "bottom",
        "inside",
        "insideTop",
        "insideLeft",
        "insideRight",
        "insideBottom",
        "insideTopLeft",
        "insideTopRight",
        "insideBottomLeft",
        "insideBottomRight",
      ];

      app.configParameters = {
        rotate: {
          min: -90,
          max: 90,
        },
        align: {
          options: {
            left: "left",
            center: "center",
            right: "right",
          },
        },
        verticalAlign: {
          options: {
            top: "top",
            middle: "middle",
            bottom: "bottom",
          },
        },
        position: {
          options: echarts.util.reduce(
            posList,
            function (map, pos) {
              map[pos] = pos;
              return map;
            },
            {}
          ),
        },
        distance: {
          min: 0,
          max: 100,
        },
      };

      app.config = {
        rotate: 90,
        align: "left",
        verticalAlign: "middle",
        position: "insideBottom",
        distance: 15,
        onChange: function () {
          var labelOption = {
            normal: {
              rotate: app.config.rotate,
              align: app.config.align,
              verticalAlign: app.config.verticalAlign,
              position: app.config.position,
              distance: app.config.distance,
            },
          };
          myChart.setOption({
            series: [
              {
                label: labelOption,
              },
              {
                label: labelOption,
              },
              {
                label: labelOption,
              },
              {
                label: labelOption,
              },
            ],
          });
        },
      };

      var labelOption = {
        show: true,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: "{a}",
        fontSize: 10,
        rich: {
          name: {
            textBorderColor: "#fff",
          },
        },
      };
      let option1 = {
        graphic: [
          {
            type: "image",
            id: "logo",
            left: "center",
            top: "120",
            bounding: "raw",
            origin: [75, 75],
            style: {
              image: this.$refs["img"].currentSrc,
              width: 92,
              // height: 99,
              opacity: 1,
            },
          },
        ],
      };
      let option2 = {
        color: ["#20CE9C", "#F7A83E", "#F75555"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: this.datalist.legend_data,
          top: 22,
        },
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: this.datalist.x_data,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        dataZoom: [
          {
            type: "slider",
            show: true,
            xAxisIndex: [0],
            start: 1,
            end: 50,
          },
          {
            type: "inside",
            xAxisIndex: [0],
            start: 1,
            end: 50,
          },
        ],
        series: [
          {
            name: this.datalist.series[0].name,
            type: "bar",
            barGap: 0,
            label: labelOption,
            data: this.datalist.series[0].data,
          },
          {
            name: this.datalist.series[1].name,
            type: "bar",
            label: labelOption,
            data: this.datalist.series[1].data,
          },
          {
            name: this.datalist.series[2].name,
            type: "bar",
            label: labelOption,
            data: this.datalist.series[2].data,
          },
        ],
      };
      let option = type == 1 ? option2 : option1;
      this.drawLine(dom, option);
    },
  },
  mounted() {
    this.chartColumn();
  },
};
</script>

<style></style>
